<template>
  <div class="ht-wrapper">
    <hts-table
      v-loading="loading"
      :data="tableData"
      :column="tableColumn"
      :options="options"
      @order="handleOrder"
      @choose="handleChoose"
      @switch="handleSwitch"
      @update="handleUpdate"
      @delete="handleDelete"
      @event="handleEvent"
    >
      <template slot="color" slot-scope="scope">
        <el-tag size="small" :color="scope.color">{{ scope.color }}</el-tag>
      </template>
    </hts-table>
    <HtsPagination :count="10" />
  </div>
</template>

<script>
export default {
  name: 'htsTableBasic',
  data() {
    return {
      loading: false,
      options: {},
      tableData: [
        {
          order: '1',
          name: '默认显示',
          html: "<p style='color:#ff5151'>富文本内容</p>",
          text: '文本显示默认',
          color: '#cccccc',
          event: '事件触发',
          images:
            'http://p2.cri.cn/M00/1E/5D/rBABCmAh6dKAHyCIAAAAAAAAAAA27.1000x621.750x466.jpeg,http://photocdn.sohu.com/20121213/Img360286971.jpg',
          radio: 0,
          switch: 1,
          suffix: 1231,
          prefix: 1231
        },
        {
          order: '1',
          name: '默认显示',
          html: "<p style='color:#ff5151'>富文本内容</p>",
          text: '文本显示默认',
          color: '#cccccc',
          event: '事件触发',
          images:
            'http://p2.cri.cn/M00/1E/5D/rBABCmAh6dKAHyCIAAAAAAAAAAA27.1000x621.750x466.jpeg,http://photocdn.sohu.com/20121213/Img360286971.jpg',
          radio: 0,
          switch: 1,
          suffix: 1231,
          prefix: 1231
        }
      ],
      tableColumn: [
        { type: 'selection' },
        { type: 'index', label: '序号' },
        { prop: 'name', label: '默认', align: 'center' },
        { type: 'html', prop: 'html', label: '富文本', align: 'center', width: '120px' },
        { type: 'text', label: '默认文本', prop: 'text', align: 'left', width: '120px' },
        { type: 'text', label: '选项文本', prop: 'radio', width: '120px', option: { 0: '未选中', 1: '已选中' } },
        { type: 'text', label: '单位后', prop: 'suffix', width: '120px', suffix: '元' },
        { type: 'text', label: '单位前', prop: 'prefix', width: '120px', prefix: '￥' },

        { type: 'sort', prop: 'order', label: '排序', align: 'center', width: '80px' },
        { type: 'event', label: '事件触发', prop: 'event', align: 'center', width: '96px' },
        { type: 'image', label: '图片内容', prop: 'images', align: 'center', width: '180px' },
        { type: 'switch', label: '开关按钮', prop: 'switch', align: 'center', width: '96px' },
        { type: 'slot', slot: 'color', color: 'order', label: '自定义插槽', align: 'center', width: '96px' },
        {
          type: 'hand',
          label: '操作',
          align: 'center',
          width: '160px',
          buttons: [
            { emit: 'update', label: '编辑' },
            { emit: 'delete', label: '删除' }
          ]
        }
      ]
    };
  },
  methods: {
    handleOrder(row) {
      console.log(row);
    },
    handleChoose(row) {
      console.log(row);
    },
    handleSwitch(row) {
      console.log(row);
    },
    handleDelete(row) {
      console.log(row);
    },
    handleEvent(row) {
      console.log(row);
    },
    handleUpdate(row) {
      console.log(row);
    }
  }
};
</script>

<style></style>
